此篇會著重在客製化修改會用到的 sass 基礎語法以及觀念分為上下兩集。
scss 註解有分為
會被編譯
、不會被編譯
兩種。
寫法://
// 不會被編譯到 css 檔案中
寫法:/**/
/* 會被編譯到 css 檔案中 */
幾乎全部自定義樣式所需要的變數都由
_variable.scss
作為基底。
重新賦值
的特性,將尚未重新被賦予新值的變數,保留預設值的設置。預設值(若沒有設置其它顏色,則會是黑色)
$paragraph-color : blue;
$paragraph-color : #000 !default;
p {
color : $paragraph-color;
}
因此在 _variable.scss
檔案中大部分變數結尾都有加上 !default
,使開發者進行客製化時,能更方便覆蓋原有的變數。
唯一例外情況:
null
則不會被覆蓋。$paragraph-color : null;
$paragraph-color : #000 !default;
p {
color : $paragraph-color;
}
$paragraph-margin-bottom
、$btn-padding-y
)簡化開頭相同的 css 樣式。
舉例 border
// 原本
.box {
border: 1px solid #000;
border-radius: 10%;
border-color: blue;
}
// 簡化
.box {
border: 1px solid {
radius: 10%;
color: blue;
}
}
sass 提供蠻多好用的函式,簡單介紹幾個常用的。
type-of:返回目標類型。
type-of(目標)
type-of(#000); // color;
type-of("Kent"); // string;
zip:合併多個陣列(每個陣列長度必須一致,否則會 編譯失敗
)
zip(陣列, 陣列, ...)
zip(1 2, 3 4) //((1 2), (3 4))
zip(1, 4) // (1, 4)
append:新增資料到陣列中
append(目標陣列, 參數)
append: (1px 2px, 3px); // 1px 2px 3px
append((), "Kent"); // (Kent) 將型態轉為陣列
針對字串操作的函式。
str-length:返回字串長度。
str-length(目標字串)
str-length("Kent"); // 回傳 4
str-index:返回索引值。(搜尋字串中第一次出現的位置,沒搜尋到
則會回傳 null
)
str-index(目標字串, 要搜尋的字)
str-index("Kent", "K"); // 回傳 1
str-slice:返回擷取後的字串。(從 1 開始,若省略第三個參數則會預設擷取到字串最後)
str-slice(目標字串, 起始位置, 結束位置)
str-slice("Kent", 1 ,3); // 回傳 Ken
str-slice("Kent", 2); // 回傳 ent
針對陣列操作的函式,索引值從 1 開始。
length:返回陣列長度。
length(目標陣列)
$color: (#000 #fff #111)
length($color) //3
length(1px 2px 3px) //3
index:返回索引值。(搜尋陣列中第一次出現的索引值,沒搜尋到
則會回傳 null
)
$color: (#000 #fff #111)
length($color, #000) //1
length(1px 2px 3px, 3px) //3
nth:返回該索引的值。(獲取陣列中對應位置的值,沒搜尋到
則會編譯錯誤
。)
$color: (#000 #fff #111)
length($color, 1) //#000
length(1px 2px 3px, 3) //3px
針對 map 型態操作的函式。
map-get:返回取的值
map-has-key:返回布林值。(搜尋 map 中 key 值是否存在)
map-keys:返回陣列。(由所有 key 值所組成)
map-values:返回陣列。(由所有 value 值所組成)
map-remove:刪除 map 指定的 key 資料。(若 key 不存在 map 中,則會回傳和之前一樣的 map)
map-merge:合併兩個 map。
$font-sizes: (
"1": 1rem,
"2": 2rem,
"3": 3rem
);
map-get($font-sizes, "2"); // 2rem
map-has-key($font-sizes, "2"); // true
map-keys($font-sizes) // ("1", "2", "3")
map-values($font-sizes) // (1rem 2rem 3rem)
map-remove($font-size, "3"); //("1": 1rem, "2": 2rem)
map-merge($font-sizes, (
"4": 4rem,
"5": 5rem
));
//("1": 1rem, "2": 2rem, "4": 4rem, "5": 5rem)
想了解更內建函式請參考官方文件:Built-In Modules
-
、_
符號
變數名稱
或 函式名稱
時是相同的。變數範例
$banner_title: 87px;
.banner {
font-size: $banner-title;
}
覆蓋特性
$banner-title: 87px;
$banner_title: 987px;
.banner {
font-size: $banner-title;
}
函式範例
@function mix_color($color1, $color2) {
@return mix($color1, $color2);
}
.text-color {
color: mix-color(#010203, #040506);
}
⚠️ 注意
變數名稱
或 函式名稱
使用上才是相同,如果是 樣式名稱
就不同了。
&
符號,用於連接的父層撰寫巢狀結構(類似 BEM 命名結構)
.banner {
&-title {
font-size: 3rem;
}
&-color {
color: red;
}
}
編譯後的 css
.banner-title {
font-size: 3rem;
}
.banner-color {
color: red;
}
巢狀結構真的寫過都說讚,寫到後面根本無法離開。
想了解更多符號請參考官方文件:Style Rules
下一集將介紹資料型態、運算符號、插補。